/*************************/
/*		OWL ANIMATION	 */
/*************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, img, ol, ul, li, fieldset, form, label, canvas, footer, header, menu, nav {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/*
@-webkit-keyframes example {
   0% { -webkit-transform: translateY(50px); }
   50% { -webkit-transform: translateY(100px); }
   100% { -webkit-transform: translateY(50px); }
}

50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}*/

#siteWrapper {
	width:1000px;
	height:1000px;
	margin:0 auto;
}

#stage {
	width:1000px;
	height:1000px;
	outline:black 1px solid;
	position:relative;
}

#owl {
	margin-top:0;
	bottom:0;
	left:0;
	position:absolute;
}


#owlHead {
	background:url(images/owlHead.png) no-repeat;
	width:260px;
	height:193px;
	z-index:100;
	position:absolute;
	margin:20px 0 0 20px;
  	-webkit-transform-origin: 0% 100%;

}

#owlBody {
	background:url(images/owlBody.png) no-repeat;
	width:295px;
	height:301px;
	margin-top:-50px;
	position:absolute;
	-webkit-transform-origin: 0% 100%;

}

#owlHead > div {
	outline:red 1px solid;
	float:left;
}

.eyeLg {
	width:121px;
	height:110px;
	margin-top:50px;
	position:absolute;
}

#leftEye {
	background:url(images/l_eye_lg.png) no-repeat;
	top:5;
	position:absolute;

}

#rightEye {
	background:url(images/r_eye_lg.png) no-repeat;
	position:absolute;
}

#leftEyeSm {
	background:url(images/l_eye_sm.png) no-repeat;
	position:absolute;
	
}

#rightEyeSm {
	background:url(images/r_eye_sm.png) no-repeat;
	position:absolute;
	
}

.pupil {
	background:url(images/pupil.png) no-repeat;
	z-index:400;
	position:absolute;
	width:68px;
	height:71px;
	top:50px;
	left:50px;
  	-webkit-transform-origin: 0% 0%;
  	outline:blue 1px solid;
}

.wings {
	width:63px;
	height:163px;
	position:absolute;
	float:left;
	outline:red 1px solid;
}

#leftWing {
	background:url(images/left_wing.png) no-repeat;
	top:10px;
	left:0;
  	-webkit-transform-origin: right top;
	position:absolute;

}

#rightWing {
	background:url(images/right_wing.png) no-repeat;
	top:10px;
	left:170px;
  	-webkit-transform-origin: left top;
	position:absolute;

}

/*************************/
/*	KEYFRAME ANIMATIONS */
/*************************/

   /* cubic-bezier here is to adjust the animation-timing speed.
   This example makes the ball take longer to slow down. */

#owl.animate {
	-webkit-animation-name: owlHop;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes owlHop {

	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}



/*************************/
/*		 ANIMATIONS		 */
/*************************/

/*#owl {
-webkit-animation: owl-x 2.5s cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: owl-y 2.5s cubic-bezier(0, 0, 0.35, 1);
}


#owl {
	-webkit-animation-name: owl-y;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:10;
	-webkit-animation-timing-function:linear;
}


#owl {
	-webkit-animation-name: hop;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:10;
	-webkit-animation-timing-function:linear;
}

#leftWing {
	-webkit-animation-name: flapWingL;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:10;
	-webkit-animation-timing-function:linear;
}

#rightWing {
	-webkit-animation: flapWingR 2s cubic-bezier(0, 0, 0.35, 1);
}

.pupil {
	{
    -webkit-animation-name: rotateThis;
  	-webkit-animation-duration:2s;
  	-webkit-animation-iteration-count:infinite;
  	-webkit-animation-timing-function:linear;
    }
}

#stage {
    position: relative;
    height: 400px;
}


  div.owl {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -ms-transition: all 3s ease-in;
  }
  div.owl img {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
  }

#stage:hover div.owl {
    -webkit-transform: translate(540px,-200px);
    -moz-transform: translate(540px,-200px);
    -o-transform: translate(540px,-200px);
    -ms-transform: translate(540px,-200px);
  }
  #stage:hover div.owl img {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
  }
*/











